<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">生产企业</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂编号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织人数</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">工厂名称</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">注册地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">通讯地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">生产地址</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">县/区级地址</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">县/区级代码</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">分公司</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">组织联系传真</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人职务</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">联系人手机</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">联系人邮箱</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">法人</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">管理者代表</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" style="height: 23px;" :span="6">备注</el-col>
          <el-col class="col-content" :span="18"><span></span></el-col>
        </el-col>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">项目信息</span>
        <el-table border :data="uploadDocumentData">
          <el-table-column prop="date" label="合同编号"> </el-table-column>
          <el-table-column prop="date" label="委托人"> </el-table-column>
          <el-table-column prop="date" label="生产者"> </el-table-column>
          <el-table-column prop="date" label="生产企业"> </el-table-column>
          <el-table-column prop="date" label="小类"> </el-table-column>
          <el-table-column prop="date" label="产品名称"> </el-table-column>
          <el-table-column prop="date" label="产品型号"> </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">文档</span>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">变更明细</span>
        <el-col :span="24">
          <el-table border :data="uploadDocumentData">
            <el-table-column prop="date" label="变更类型"> </el-table-column>
            <el-table-column prop="date" label="变更时间"> </el-table-column>
            <el-table-column prop="date" label="变更前"> </el-table-column>
            <el-table-column prop="date" label="变更后"> </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>

    <el-tabs type="border-card" class="tabs-card">
      <el-tab-pane>
        <span slot="label">变更范围</span>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">合同编号</el-col>
          <el-col class="col-content" :span="6"><span></span></el-col>
          <el-col class="col-content title-span" :span="6">检查类型</el-col>
          <el-col class="col-content" :span="6">
            <el-radio v-model="radio" label="1">初审</el-radio>
            <el-radio v-model="radio" label="2">监1</el-radio>
            <el-radio v-model="radio" label="3">监2</el-radio>
          </el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">标准版本</el-col>
          <el-col class="col-content" :span="6">
            <el-input style="width: 250px;" v-model="searchParams.groupId"></el-input>
          </el-col>
          <el-col class="col-content title-span" :span="6">产品人数</el-col>
          <el-col class="col-content" :span="6">
            <el-input style="width: 250px;" v-model="searchParams.groupId"></el-input>
          </el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">是否检查</el-col>
          <el-col class="col-content" :span="6">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio> 
          </el-col>
          <el-col class="col-content title-span" :span="6">现场人日</el-col>
          <el-col class="col-content" :span="6">
            <el-input style="width: 250px;" v-model="searchParams.groupId"></el-input>
          </el-col>
        </el-col>
        <el-col class="row-content" :span="24">
          <el-col class="col-content title-span" :span="6">是否检测</el-col>
          <el-col class="col-content" :span="18">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>            
          </el-col>
        </el-col>
        <el-col class="row-content" style="border-bottom: 1px solid #bbb;" :span="24">
          <el-col class="col-content title-span" style="height: 96px;" :span="6">审核范围</el-col>
          <el-col class="col-content" :span="12">
            <el-input style="width: 500px;" type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
          </el-col>
          <el-col class="col-content title-span"  style="height: 96px;" :span="6">说明：如果本次为补充审核（小范围审核），先写全部范围，再写补充范围！</el-col>
        </el-col>
        <el-form
          ref="form"
          :model="searchParams"
          label-width="150px"
        >
          <el-col class="search-col">
            <el-form-item label="专业管理人" prop="companyName">
              <el-input style="width: 250px;" v-model="searchParams.groupId"></el-input>
            </el-form-item>
            <el-form-item label="项目组备注" prop="groupId">
              <el-input style="width: 500px;"  type="textarea" :rows="4" v-model="searchParams.groupId"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="save-btn">
          <el-checkbox v-model="checked" style="margin-right: 20px;">已评审</el-checkbox>
          <el-button type="primary">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'changeAndProjectDetail',
  data() {
    return {
      defulatParams: {
        companyName: "", // 企业名称
        groupId: "", // 组织代码
        province: "", // 省份
        contacts: "", // 联系人
        companyId: "" // 工厂编号
      },
      searchParams: {
        ...this.defulatParams,
      },
    };
  },
  mounted() {
  },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .tabs-card {
    margin-bottom: 15px;
  }

  .row-content {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
  }

  .title-span {
    text-align: center;
    background-color: #f0f5f8;
    justify-content: end;
    padding-right: 20px;
  }

  .col-content {
    min-height: 40px;
    border-right: 1px solid #bbb;
    padding-left: 4px;
    display: flex;
    align-items: center;
  }

  .table-span {
    padding: 8px;
    border-right: 1px solid #bbb;
  }
}

.save-btn {
  width: 200px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
